<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.resourceDaas') }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if (tableSearch) {
                      params.page = 1;
                      tableSearch = false;
                    }
              return $pandaApi.apiGetDaaSTenantList(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" class="icon-button setting-button" style="width: auto;" @click="$refs['DaasFormDialop'].init()">
                  <i class="iconfont iconzhongyiicon_chuangjian" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.Create') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto; margin-left: 10px;" @click="batchDelete(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="el-icon-delete" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.BatchDelete') }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('common.SearchByName')" @keyup.enter.native="tableSearchChange(tableSlotData)" v-model="searchValue" style="width:200px" >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="name"
                :label="$t('common.name')"
              >
                <template #default="props">
                  <link-button :content="props.row.name" :isName="true" :size="10" :font-size="'12px'" @click="() => {
                    window.open(`${props.row.uri}/admin`);
                  }" />
                </template>
              </el-table-column>
              <el-table-column
                prop="resource_pool_name"
                :label="$t('route.resourcePool')"
                width="150">
              </el-table-column>
              <el-table-column
                prop="credential.username"
                :label="$t('common.tenant')"
                width="150">
              </el-table-column>
              <el-table-column
                prop="uri"
                :label="$t('common.manageAddress')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="ad_address"
                :label="$t('common.adAddress')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="connection_info.gateway"
                :label="$t('common.gatewayAddress')"
                width="180">
              </el-table-column>
              <el-table-column
                prop="desktop_pool_count"
                :label="$t('common.desktopPool')"
                width="150">
              </el-table-column>
              <el-table-column
                prop="destop_count"
                :label="$t('common.desktop')"
                width="150">
              </el-table-column>
              <el-table-column
                :label="$t('common.action')"
              >
                <template #default="props">
                  <link-button :content="$t('common.edit')" :size="10" :font-size="'12px'" @click="$router.push({
                    name: 'DaasDetail',
                    params: {
                      formData: props.row
                    }
                  })" style="margin-right: 15px;" />
                  <link-button :content="$t('common.delete')" :size="10" :font-size="'12px'" @click="deleteRow(props.row)" />
                  <el-dropdown style="margin-left: 10px;" :hide-on-click="false" @command="(cmd) => {
                    switch(cmd) {
                      case 'management-desktop':
                        $router.push({
                          path: '/desktopManage/DaaSDesktopPools',
                          query: {
                            resource_pool: props.row.resource_pool,
                            resource_id: props.row.id,
                            resource_type: props.row.resource_type
                          }
                        });
                        break;
                      case 'synchronize-now':
                        $pandaApi.syncDaaSDesktopPools(props.row.resource_pool, props.row.id).then(() => {
                          tableSlotData.table.refresh();
                        });
                    }
                  }">
                    <el-button class="icon-button setting-button" style="width: auto;">
                      <span style="font-size: 12px;">{{$t('common.More')}}</span>
                      <i class="el-icon-arrow-down el-icon--right" style="font-size: 12px; margin-left: 5px;"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="'management-desktop'">{{ $t('resource.managementDesktop') }}</el-dropdown-item>
                      <el-dropdown-item :disabled="synchronizeNowLoading" :command="'synchronize-now'">{{ $t('resource.synchronizeNow') }}<i v-if="synchronizeNowLoading" class="el-icon-loading" style="color: #333333; margin-left: 5px;"></i></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <daas-form-dialop ref="DaasFormDialop" :submit-method="(data) => {
                $pandaApi.apiPostDaasTenantList(data).then(() => {
                  tableSlotData.table.refresh();
                });
              }" />
              <password-delete-dialog ref="PasswordDeleteDialog" :delete-method="(resourceList) => $pandaApi.apiBatchDeleteDaasResourcePools(resourceList).then(() => {
                tableSlotData.table.refresh();
              })" />
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import DaasFormDialop from './components/DaasFormDialop.vue';
import PasswordDeleteDialog from './components/PasswordDeleteDialog.vue';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    DaasFormDialop,
    PasswordDeleteDialog
  },
  data() {
    return {
      searchValue: "",
      synchronizeNowLoading: false,
      tableSearch: false
    }
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    batchDelete(selectRows: Array<any>) {
      (this as any).$refs.PasswordDeleteDialog.init({
        title: (this as any).$t('resource.BatchDeleteDaasTitle'),
        tip: (this as any).$t('resource.batchDeleteDaasTip'),
        message: (this as any).$t('resource.batchDeleteDaasMessage'),
        resourceList: selectRows
      });
    },
    deleteRow(row: any) {
      (this as any).$refs.PasswordDeleteDialog.init({
        title: (this as any).$t('resource.DeleteDaasTitle', row),
        tip: (this as any).$t('resource.deleteDaasTip', row),
        message: (this as any).$t('resource.deleteDaasMessage', row),
        resourceList: [row]
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
